<template>
	<div class="shop-ordergl">
		<div class="shop-nav">
			<ul>
				<li :class="{'active':orderNavindex==0}" @click="discounttab(0)">全部</li>
				<li :class="{'active':orderNavindex==1}" @click="discounttab(1)">待付款</li>
				<li :class="{'active':orderNavindex==2}" @click="discounttab(2)">待发货</li>
				<li :class="{'active':orderNavindex==3}" @click="discounttab(3)">退货退款</li>
			</ul>
			<span class="shopnav-span"></span>
		</div>
		<orderall v-if="orderNavindex==0"></orderall>
		<orderfu v-if="orderNavindex==1"></orderfu>
		<orderfa v-if="orderNavindex==2"></orderfa>
		<ordertui v-if="orderNavindex==3"></ordertui>
	</div>
</template>

<script>
	import orderall from '@/components/business-group/shoporderall'
	import orderfu from '@/components/business-group/shoporderfu'
	import orderfa from '@/components/business-group/shoporderfa'
	import ordertui from '@/components/business-group/shopordertui'
	export default{
		name:'shop-nav',
		data(){
			return{
				orderNavindex:0
			}
		},
		components:{orderall,orderfu,orderfa,ordertui},
		created:function(){
			
			
		},
		mounted:function(num){
			
		},
		methods:{
			discounttab:function(num){
				this.orderNavindex=num;
				var self=this;
				$(".shopnav-span").css("left",self.orderNavindex*25+8.5+'%');
			}
		}
	}
</script>

<style>
	.shop-ordergl{padding-top:0.98rem;font-size:0;}
	.shop-nav{
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:0.9rem;
		font-size:0;
		background-color:#fff;
		box-sizing: border-box;
		box-shadow: 0 -0.18rem 0.4rem 0rem #4b9c31;
		z-index: 999;
	}
	.shop-nav ul{
		z-index: 99;
	}
	.shop-nav ul li{
		text-align: center;
		display: inline-block;
		height:0.86rem;
		width:25%;
		box-sizing: border-box;
		line-height: 0.86rem;
	}
	.shop-nav ul li {
		font-size:0.28rem;
		color:#666;
	}
	.shop-nav ul .active {
		color:#FF9C03;
	}
	.shopnav-span{
		width:0.6rem;
		height:0.04rem;
		border-radius:0.04rem;
		background-color:#FF9C03;
		display: inline-block;
		position:absolute;
		bottom:0;
		left:8.5%;
		z-index: 999;
	}
	.shop-ordergl .shopcard-listBox .order-goods-stute{
		float:right;
		font-size:0.28rem;
		color:#FF9C03;
		font-weight:500;
	}
	.shop-ordergl .shopcard-listBox .shopDd-ddh{
		height:0.76rem;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
	}
	.shop-ordergl .shopcard-listBox .shopDd-ddh span{
		display: inline-block;
		height:0.76rem;
		font-size:0.28rem;
		color:#2b2b2b;
		line-height: 0.76rem;
	}
	.shop-ordergl .shopcard-listBox .shopDd-ddh span:nth-child(1){
		font-size:0.24rem;
		color:#666;
	}
	.shop-ordergl .shopcard-listBox .shopDd-ddh span:nth-child(2){
		color:#FF9C03;
	}
	.shop-ordergl .shopcard-listBox .shopDd-ddh span:nth-child(2),.shop-ordergl .shopcard-listBox .shopDd-ddh span:nth-child(3){
		float:right;
	}
	.shopDd-list-czbtn{
		text-align: right;
		padding-top:0.24rem;
		padding-bottom:0.24rem;
	}
	.shopDd-list-czbtn>a,.shopDd-list-czbtn>span{
		padding:0.06rem 0.28rem;
		border-radius:0.5rem;
		font-size:0.28rem;
		margin-left: 0.25rem;
		display: inline-block;
	}
	.order-qxdd,.order-ckdd,.order-dpj,.order-qrsh{
		color:#666;
		border:1px solid #999;
	}
	.order-dpj,.order-qrsh{
		/*display: none !important;*/
	}
	.order-qfk{
		color:#FF9C03;
		border:1px solid #FF9C03;
	}
	.order-tkzt{
		color:#FF9C03;
		float:right;
	}
	.shop-ordergl .shopcard-title i{width:0.88rem;height:0.88rem;border-radius:0.44rem;overflow: hidden;margin-top: 0.16rem;}
	.shop-ordergl .shopcard-title i>img{width:100%;height:0.88rem;}
	.shop-ordergl .shopcard-title>span{line-height: 1.2rem;}
	.shop-user-xinxi{width:50%;display: inline-block;padding-top: 0.1rem;padding-bottom: 0.1rem;}
	.shop-user-xinxi>p{font-size:0.28rem;color:#2B2B2B;line-height:0.46rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
	.shop-user-xinxi>span{font-size:0.24rem;color:#999;font-weight:500;line-height: 0.38rem;}
</style>